{% extends "finance/financial_module.html" %}
{% load state_display %}
{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
{#    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">#}
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link href="../../static/personnel/css/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .add_background {
            background: #A9A9A9;
        }
        ::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background-color: #999;
        }

        tr:hover {
            background: #D9D9D9;
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;height: 30px;text-align: center;
            line-height: 30px;letter-spacing:6px;

        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        .shade {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(36, 36, 36, 0.5);
            display: none;
            z-index: 10000;
        }

        #addForm2 {
            width: 500px;
            height: 300px;
            background: #F5F5F5;
            position: absolute;
            border: #dfdfdf solid 1px;
            margin: auto;
            border-radius: 3px;
            top: 50%;
            left: 50%;
            /* 实现鼠标拖拽使用css3效果 */
            transform: translate(-50%, -50%);
            z-index: 10100;
            font-size: 0;
        }

        #title2 {
            display: flex;
            justify-content: space-between;
            text-align: right;
            box-sizing: border-box;
            padding: 0 10px;
            height: 40px;
            color: #0b0b0b;
            cursor: move;
            border-bottom: #DFDFDF solid 1px;
            /*border: #dfdfdf solid 1px;*/
            width: 100%;background: #f4f7fa;border-top-left-radius: 5px;border-top-right-radius: 5px;
        }
    </style>
{% endblock %}

{% block right_content %}
    <div style="display: inline-block;vertical-align: top;width: 100%;height: 100%;">
        <div class="headline">
            <button style="vertical-align: top;margin-top: 5px;margin-left: 1%; border: none; width: 130px; height: 32px;background: #1E90FF; border-radius: 3px; color: #FFFFFF;"
                    onmousemove="page_zhanshi()" onmouseout="page_yincang()">薪资/绩效导入
            </button>

            <div style="width: 50%;height: 100%;float: right;padding-right: 1%;">
                <div id="select_month" style="width: 28%;display: inline-block;vertical-align: top;height: 30px;margin-top: 2.5px;">
                    <select name="month" style="width: 100%;margin-top: 5px;height:25px;z-index: 100;font-size: 14px;border: #00a0e9 solid 1px;border-radius: 3px;" id="month" class="month_select select">
                        <option value="0">请选择月份</option>
                        {% for month_dict in month_list %}
                            <option value="{{ month_dict.value }}">{{ month_dict.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div id="select_year" style="width: 28%;display: inline-block;vertical-align: top;height: 30px;margin-top: 2.5px;">
                    <select name="year" style="width: 100%;margin-top: 5px;height:25px;z-index: 100;font-size: 14px;border: #00a0e9 solid 1px;border-radius: 3px;" id="year" class="dept_select select">
                        <option value="0">请选择年份</option>
                        {% for year_dict in year_list %}
                            <option value="{{ year_dict.value }}">{{ year_dict.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div style="width: 28%;display: inline-block;vertical-align: top;">
                    <input type="text" style="width: 100%;border: #cfcfcf solid 1px;height: 33px;padding-left: 1%;border-radius: 3px;margin-top: 3px;">
                </div>

                <button onclick="SearchData()" style="width: 70px;height: 30px;margin-top: 5px;border: #0c6fd9 solid 1px;background: #0c6fd9;color: white;border-radius: 3px;letter-spacing: 5px;text-align: center;margin-left: 5px;">
                    提交
                </button>
            </div>

            <div id="page_one" style="z-index: 1000; position: absolute; width: 130px;left: 14.9%; top: 82px;background: #FFFFFF; box-shadow: rgb(204 204 204) 2px 2px 10px;padding: 5px;display: none;text-align: center;"
                 onmousemove="page_zhanshi()" onmouseout="page_yincang()">
                <div style="margin-bottom: 10px;width: 115px;height: 30px;background: #0c6fd9;color: white;border-radius: 3px;line-height: 30px;margin-left: 3px;cursor: pointer;" onclick="online_tag()">
                    薪资/绩效导入
{#                    <a href="javascript:;" class="file" style="vertical-align: top;">#}
{#                        薪资/绩效导入#}
{#                        <input type="file" name="party_main_body" id="party_main_body" onchange="upload_accessory('salary_excel', 'party_main_body')">#}
{#                    </a>#}
                </div>
                <div>
                    <a href="../../media/SalaryTemplate/薪资模板.xls" download="薪资模板.xls" style="vertical-align: top;border: 1px solid #99D3F5; background: #D0EEFF; border-radius: 4px; padding: 4px 15.5px;letter-spacing:0;">薪资模板下载</a>
                </div>

                <div style="margin-top: 12px;margin-bottom: 12px;">
                    <a href="../../media/SalaryTemplate/绩效模板.xlsx" download="绩效模板.xlsx" style="vertical-align: top;border: 1px solid #99D3F5; background: #D0EEFF; border-radius: 4px; padding: 4px 15.5px;letter-spacing:0;">绩效模板下载</a>
                </div>
            </div>
        </div>
        <div id="my_application" style="width: 100%;height: 95.3%;overflow: auto;background-color: white;">
            <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
                <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                    <table style="border-collapse:collapse;overflow-x: auto;width: 300%;" border="1" id="table_tag">
                        <tr style="width: 100%;">
                            <td colspan="25" style="height: 30px;text-align: center;"><strong style="font-size: 18px;">薪资</strong></td>
                            <td colspan="22" style="height: 30px;text-align: center;"><strong style="font-size: 18px;">绩效</strong></td>
                        </tr>
                        <tr style="width: 100%;">
                            <td style="height: 30px;width: 100px;text-align: center;">人员编号</td>
                            <td style="height: 30px;width: 100px;text-align: center;">姓名</td>
                            <td style="height: 30px;width: 150px;text-align: center;">人员类别</td>
                            <td style="height: 30px;width: 150px;text-align: center;">部门</td>
                            <td style="height: 30px;width: 220px;text-align: center;">银行账号</td>
                            <td style="height: 30px;width: 100px;text-align: center;">岗位工资</td>
                            <td style="height: 30px;width: 100px;text-align: center;">薪级工资</td>
                            <td style="height: 30px;width: 100px;text-align: center;">标准绩效</td>
                            <td style="height: 30px;width: 100px;text-align: center;">护贴</td>
                            <td style="height: 30px;width: 100px;text-align: center;">车贴</td>
                            <td style="height: 30px;width: 100px;text-align: center;">卫生津贴</td>
                            <td style="height: 30px;width: 100px;text-align: center;">卫生劳保费</td>
                            <td style="height: 30px;width: 100px;text-align: center;">应发合计</td>
                            <td style="height: 30px;width: 100px;text-align: center;">养老保险</td>
                            <td style="height: 30px;width: 100px;text-align: center;">职业年金</td>
                            <td style="height: 30px;width: 100px;text-align: center;">医疗保险</td>
                            <td style="height: 30px;width: 100px;text-align: center;">失业保险</td>
                            <td style="height: 30px;width: 100px;text-align: center;">住房公积金</td>
                            <td style="height: 30px;width: 100px;text-align: center;">补扣保险</td>
                            <td style="height: 30px;width: 100px;text-align: center;">扣款</td>
                            <td style="height: 30px;width: 70px;text-align: center;">水电费</td>
                            <td style="height: 30px;width: 70px;text-align: center;">其它</td>
                            <td style="height: 30px;width: 70px;text-align: center;">会费</td>
                            <td style="height: 30px;width: 100px;text-align: center;">扣款合计</td>
                            <td style="height: 30px;width: 100px;text-align: center;">工资实发</td>
                            <td style="height: 30px;width: 100px;text-align: center;">科室编号</td>
                            <td style="height: 30px;width: 100px;text-align: center;">科室</td>
                            <td style="height: 30px;width: 100px;text-align: center;">职务</td>
                            <td style="height: 30px;width: 100px;text-align: center;">类别</td>
                            <td style="height: 30px;width: 100px;text-align: center;">工号</td>
                            <td style="height: 30px;width: 100px;text-align: center;">姓名</td>
                            <td style="height: 30px;width: 220px;text-align: center;">银行帐号</td>
                            <td style="height: 30px;width: 100px;text-align: center;">工作量绩效</td>
                            <td style="height: 30px;width: 130px;text-align: center;">科主任管理绩效</td>
                            <td style="height: 30px;width: 100px;text-align: center;">夜班绩效</td>
                            <td style="height: 30px;width: 100px;text-align: center;">会诊绩效</td>
                            <td style="height: 30px;width: 100px;text-align: center;">专家号绩效</td>
                            <td style="height: 30px;width: 100px;text-align: center;">医共体绩效</td>
                            <td style="height: 30px;width: 100px;text-align: center;">其他单项绩效</td>
                            <td style="height: 30px;width: 100px;text-align: center;">停车绩效</td>
                            <td style="height: 30px;width: 100px;text-align: center;">人才储备绩效</td>
                            <td style="height: 30px;width: 100px;text-align: center;">公卫绩效</td>
                            <td style="height: 30px;width: 100px;text-align: center;">扣款</td>
                            <td style="height: 30px;width: 100px;text-align: center;">应发绩效合计</td>
                            <td style="height: 30px;width: 100px;text-align: center;">个人所得税</td>
                            <td style="height: 30px;width: 100px;text-align: center;">实发绩效</td>
                            <td style="height: 30px;width: 100px;text-align: center;">扣款备注</td>
                        </tr>
                        {% for all_data in all_list %}
                            <tr>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.personnel_number }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.real_name }}</td>
                                <td style="height: 30px;width: 150px;text-align: center;">{{ all_data.personnel_category }}</td>
                                <td style="height: 30px;width: 150px;text-align: center;">{{ all_data.company }}</td>
                                <td style="height: 30px;width: 220px;text-align: center;">{{ all_data.bank_account }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.post_wage }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.salary_level_salary }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.standard_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.protective_tape }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.car_tape }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.health_allowance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.labor_insurance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.total_payable }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.endowment_insurance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.occupational_annuity }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.medical_insurance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.unemployment_insurance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.housing_fund }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.deduction_insurance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.deduction }}</td>
                                <td style="height: 30px;width: 70px;text-align: center;">{{ all_data.hydropower }}</td>
                                <td style="height: 30px;width: 70px;text-align: center;">{{ all_data.other }}</td>
                                <td style="height: 30px;width: 70px;text-align: center;">{{ all_data.membership_fees }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.total_deduction }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.predict_amount }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_department_number }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_department }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_post }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_category }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_job_id }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_names }}</td>
                                <td style="height: 30px;width: 220px;text-align: center;">{{ all_data.Per_bank_number }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_workload_performance }}</td>
                                <td style="height: 30px;width: 130px;text-align: center;">{{ all_data.Per_management_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_night_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_consultation_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_expert_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_medical_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_individual_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_parking_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_talent_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_public_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_deduction }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_payable_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_personal_income_tax }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_actual_performance }}</td>
                                <td style="height: 30px;width: 100px;text-align: center;">{{ all_data.Per_deduction_remarks }}</td>
                            </tr>
                        {% endfor %}
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div id="addForm3" class="shade" style="display: none;">
        <div id="addForm2">
            <div id="title2">
                <div style="line-height: 40px;padding-right: 2%;cursor: move;width: 100%;font-size: 14px;">
                    <div style="float: left;padding-left: 2%;">上传文件</div>
                    <i class="iconfont icon-quchu" onclick="close_models2()" style="cursor: pointer;"></i>
                </div>
            </div>
            <div style="width: 100%;height: 220px;border-bottom: #DFDFDF solid 1px;font-size: 14px;line-height: 100px;padding-left: 2%;">
                <div style="width: 100%;height: 60px;line-height: 60px;">
                    <label for="">文件类型：</label>
                    <input type="radio" name="salary" value="1"> 薪资上传
                    <input type="radio" name="salary" value="2" style="margin-left: 80px;"> 绩效上传
                </div>
                <div style="width: 100%;height: 60px;line-height: 60px;">
                    <div style="display: inline-block;">
                        <label for="">年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份：</label>
                        <input type="text" style="width: 150px;height: 30px;border: #DFDFDF solid 1px;outline: none;border-radius: 3px;" id="Years">
                    </div>
                    <div style="display: inline-block;margin-left: 10px;">
                        <label for="">月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;份：</label>
                        <select name="" id="SelectMonth" style="width: 150px;height: 30px;border: #DFDFDF solid 1px;outline: none;border-radius: 3px;">
                            <option value="1">一月</option>
                            <option value="2">二月</option>
                            <option value="3">三月</option>
                            <option value="4">四月</option>
                            <option value="5">五月</option>
                            <option value="6">六月</option>
                            <option value="7">七月</option>
                            <option value="8">八月</option>
                            <option value="9">九月</option>
                            <option value="10">十月</option>
                            <option value="11">十一月</option>
                            <option value="12">十二月</option>
                        </select>
                    </div>
                </div>
                <div style="width: 100%;height: 60px;line-height: 60px;">
                    <div style="display: inline-block;vertical-align: top;">上传文件：</div>
                    <div style="display: inline-block;vertical-align: top;padding-top: 10px;">
                        <a href="javascript:;" class="file" style="width: 80px;vertical-align: center;display: inline-block;">
                            上传
                            <input type="file" name="party_main_body" id="party_main_body" onchange="get_name()">
                        </a>
                    </div>
                    <span id="FileNames" style="padding-left: 2%;"></span>
                </div>
            </div>
            <div style="width: 100%;height: 40px;font-size: 14px;text-align: right;padding-right: 2%;">
                <button style="width: 80px;height: 30px;margin-top: 5px;line-height: 30px;border: #00a0e9 solid 1px;background: #00a0e9;color: white;border-radius: 3px;letter-spacing: 5px;" onclick="upload_accessory()">确认</button>
            </div>
        </div>
    </div>

{% endblock %}
{% block script %}
    <script src="../../static/personnel/js/jquery-1.11.1.min.js"></script>
{#    <script type="text/javascript" src="../../static/administrative/js/layer.js"></script>#}
    <script src="../../static/personnel/division_js/jquery.searchableSelect.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("finance").className = "add-nav-active";
            document.getElementById("worker_bill").className = "add_class";
        };

        function page_zhanshi() {
            document.getElementById('page_one').style.display = 'inline-block';
        }

        function page_yincang() {
            document.getElementById('page_one').style.display = 'none';
        }

        function online_tag() {
            document.getElementById("addForm3").style.display = "table-row";
        }

        function close_models2() {
            document.getElementById("addForm3").style.display = "none";
        }

        function get_name() {
            var files = document.getElementById("party_main_body").files[0];
            document.getElementById("FileNames").innerText = files.name;
        }

        // 上传正文
        function upload_accessory() {
            document.getElementById("loading").style.display = "inline-block";
            var form = new FormData();
            var files = document.getElementById("party_main_body").files[0];

            var salary = $("input[type=radio][name=salary]:checked").val();      // 文件类型
            var month = document.getElementById("SelectMonth").value;
            var Years = document.getElementById("Years").value;

            form.append("file", files);
            form.append('year', Years)
            form.append('month', month)
            form.append('FileType', salary)
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/finance/import_salary_record_view", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {
                            alert("上传成功！");
                            window.location.reload()
                        }else {
                            alert("上传失败！")
                        }
                        document.getElementById("party_main_body").value = "";
                    }
                }
            };
        }

        function SearchData() {
            var form = new FormData();
            var years = document.getElementById("year").value;
            var months = document.getElementById("month").value;
            form.append('year', years)
            form.append('month', months)

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/finance/salary_record_list_view", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        var html_str = `
                            <tr style="width: 100%;">
                                <td colspan="25" style="height: 30px;text-align: center;"><strong style="font-size: 18px;">薪资</strong></td>
                                <td colspan="22" style="height: 30px;text-align: center;"><strong style="font-size: 18px;">绩效</strong></td>
                            </tr>
                            <tr style="width: 100%;">
                                <td style="height: 30px;width: 100px;text-align: center;">人员编号</td>
                                <td style="height: 30px;width: 100px;text-align: center;">姓名</td>
                                <td style="height: 30px;width: 150px;text-align: center;">人员类别</td>
                                <td style="height: 30px;width: 150px;text-align: center;">部门</td>
                                <td style="height: 30px;width: 220px;text-align: center;">银行账号</td>
                                <td style="height: 30px;width: 100px;text-align: center;">岗位工资</td>
                                <td style="height: 30px;width: 100px;text-align: center;">薪级工资</td>
                                <td style="height: 30px;width: 100px;text-align: center;">标准绩效</td>
                                <td style="height: 30px;width: 100px;text-align: center;">护贴</td>
                                <td style="height: 30px;width: 100px;text-align: center;">车贴</td>
                                <td style="height: 30px;width: 100px;text-align: center;">卫生津贴</td>
                                <td style="height: 30px;width: 100px;text-align: center;">卫生劳保费</td>
                                <td style="height: 30px;width: 100px;text-align: center;">应发合计</td>
                                <td style="height: 30px;width: 100px;text-align: center;">养老保险</td>
                                <td style="height: 30px;width: 100px;text-align: center;">职业年金</td>
                                <td style="height: 30px;width: 100px;text-align: center;">医疗保险</td>
                                <td style="height: 30px;width: 100px;text-align: center;">失业保险</td>
                                <td style="height: 30px;width: 100px;text-align: center;">住房公积金</td>
                                <td style="height: 30px;width: 100px;text-align: center;">补扣保险</td>
                                <td style="height: 30px;width: 100px;text-align: center;">扣款</td>
                                <td style="height: 30px;width: 70px;text-align: center;">水电费</td>
                                <td style="height: 30px;width: 70px;text-align: center;">其它</td>
                                <td style="height: 30px;width: 70px;text-align: center;">会费</td>
                                <td style="height: 30px;width: 100px;text-align: center;">扣款合计</td>
                                <td style="height: 30px;width: 100px;text-align: center;">工资实发</td>
                                <td style="height: 30px;width: 100px;text-align: center;">科室编号</td>
                                <td style="height: 30px;width: 100px;text-align: center;">科室</td>
                                <td style="height: 30px;width: 100px;text-align: center;">职务</td>
                                <td style="height: 30px;width: 100px;text-align: center;">类别</td>
                                <td style="height: 30px;width: 100px;text-align: center;">工号</td>
                                <td style="height: 30px;width: 100px;text-align: center;">姓名</td>
                                <td style="height: 30px;width: 220px;text-align: center;">银行帐号</td>
                                <td style="height: 30px;width: 100px;text-align: center;">工作量绩效</td>
                                <td style="height: 30px;width: 130px;text-align: center;">科主任管理绩效</td>
                                <td style="height: 30px;width: 100px;text-align: center;">夜班绩效</td>
                                <td style="height: 30px;width: 100px;text-align: center;">会诊绩效</td>
                                <td style="height: 30px;width: 100px;text-align: center;">专家号绩效</td>
                                <td style="height: 30px;width: 100px;text-align: center;">医共体绩效</td>
                                <td style="height: 30px;width: 100px;text-align: center;">其他单项绩效</td>
                                <td style="height: 30px;width: 100px;text-align: center;">停车绩效</td>
                                <td style="height: 30px;width: 100px;text-align: center;">人才储备绩效</td>
                                <td style="height: 30px;width: 100px;text-align: center;">公卫绩效</td>
                                <td style="height: 30px;width: 100px;text-align: center;">扣款</td>
                                <td style="height: 30px;width: 100px;text-align: center;">应发绩效合计</td>
                                <td style="height: 30px;width: 100px;text-align: center;">个人所得税</td>
                                <td style="height: 30px;width: 100px;text-align: center;">实发绩效</td>
                                <td style="height: 30px;width: 100px;text-align: center;">扣款备注</td>
                            </tr>`
                        var last_str = '';
                        for (var i=0; i<JsonDate['all_list'].length; i++) {
                            var tr_str = `
                                    <tr>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['personnel_number']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['real_name']+`</td>
                                        <td style="height: 30px;width: 150px;text-align: center;">`+JsonDate['all_list'][i]['personnel_category']+`</td>
                                        <td style="height: 30px;width: 150px;text-align: center;">`+JsonDate['all_list'][i]['company']+`</td>
                                        <td style="height: 30px;width: 220px;text-align: center;">`+JsonDate['all_list'][i]['bank_account']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['post_wage']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['salary_level_salary']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['standard_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['protective_tape']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['car_tape']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['health_allowance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['labor_insurance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['total_payable']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['endowment_insurance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['occupational_annuity']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['medical_insurance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['unemployment_insurance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['housing_fund']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['deduction_insurance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['deduction']+`</td>
                                        <td style="height: 30px;width: 70px;text-align: center;">`+JsonDate['all_list'][i]['hydropower']+`</td>
                                        <td style="height: 30px;width: 70px;text-align: center;">`+JsonDate['all_list'][i]['other']+`</td>
                                        <td style="height: 30px;width: 70px;text-align: center;">`+JsonDate['all_list'][i]['membership_fees']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['total_deduction']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['predict_amount']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_department_number']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_department']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_post']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_category']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_job_id']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_names']+`</td>
                                        <td style="height: 30px;width: 220px;text-align: center;">`+JsonDate['all_list'][i]['Per_bank_number']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_workload_performance']+`</td>
                                        <td style="height: 30px;width: 130px;text-align: center;">`+JsonDate['all_list'][i]['Per_management_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_night_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_consultation_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_expert_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_medical_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_individual_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_parking_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_talent_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_public_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_deduction']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_payable_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_personal_income_tax']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_actual_performance']+`</td>
                                        <td style="height: 30px;width: 100px;text-align: center;">`+JsonDate['all_list'][i]['Per_deduction_remarks']+`</td>
                                    </tr>
                                    `
                            last_str += tr_str;
                        }
                        document.getElementById('table_tag').innerHTML = '';
                        document.getElementById('table_tag').innerHTML = html_str+last_str;
                    }
                }
            };
        }

        function select_and_search() {
            xmSelect.render({
                el: '#selectDemo',
                checkbox: true,
                repeat: false,
                autoRow: true,
                filterable: true,
                prop: {name: 'name', value: 'value',},
                height: '200px',
                tips: '请选择',
                tree: {
                    show: true,
                    showFolderIcon: true,
                    showLine: true,
                    indent: 20,
                    expandedKeys: [-3],
                    strict: false,
                },
                data: function () {
                    return {{ dep_dict_list | safe }};

                },
                on: function (data) {
                    var arr = data.arr;                     //arr:  当前多选已选中的数据
                    console.log("data: ", arr)
                    var li_list = document.getElementsByClassName("xm-icon-duox")
                    for (var i=0; i<li_list.length; i++) {
                        console.log(li_list[i].selected)
                    }
                },
            });
        }

        $(function(){
            $('.select').searchableSelect();
        });

        let title2 = document.querySelector("#title2");
        let addForm2 = document.querySelector("#addForm2");
        title2.addEventListener("mousedown", function (e) {
            let x = e.pageX - addForm2.offsetLeft;
            let y = e.pageY - addForm2.offsetTop;


            document.addEventListener("mousemove", move);
            function move(e) {
                addForm2.style.left = e.pageX - x + 'px';
                addForm2.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });
    </script>
{% endblock %}